<template>
    <div>

        <div class="user-list unified-bg-white unifined-border-radius">
            <div class="box-head flex unified-flex-space-between ">

                <span class="box-head-title">Express List</span>

                <div class="user-list-head-search-box flex ">
                    <div class="user-list-head-search">
                        <input type="" name="" id="" value="" class="user-list-head-search-input" />
                        <span class="user-list-head-search-btn el-icon-search"></span>
                    </div>

                    <!-- 添加按钮 -->
                    <span class="user-list-head-action-btn el-icon-circle-plus-outline" @click="add"></span>
                    <!-- 全选/反选 -->
                    <el-dropdown>
                        <span class="user-list-head-action-btn el-icon-more"></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>全选</el-dropdown-item>
                            <el-dropdown-item>反选</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="unified-table-padding">
                <!-- 筛选部分 -->
                <el-table :data="list" style="width: 100%">
                    <el-table-column label="LOGO" width="190">
                        <template>
                            <div class="logo"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="服务商名">
                        <template slot-scope="scope">
                            <span>{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="服务状态" width="100">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="120">
                        <template>
                            <el-button type="text">开启</el-button>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 商品列表 -->
                <div class="unified-pagination unified-bg-white">
                    <el-pagination :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                list: [{
                        _id: "",
                        name: "菜鸟物流", // 物流名称
                        access: false, // 接入状态（指菜鸟物流的API未完善）
                        logo: "", // logo文件地址
                        status: 0, // 0正常 1关闭服务
                    },
                    {
                        _id: "",
                        name: "天天快递", // 物流名称
                        access: false, // 接入状态（指菜鸟物流的API未完善
                        logo: "", // logo文件地址
                        status: 0, // 0正常 1关闭服务
                        region: [{
                            code: 20,
                            name: "广东省",
                            children: [{
                                code: 10,
                                name: "惠州市",
                                children: [{

                                }],
                                status: 1
                            }],
                            status: 0
                        }]
                    },
                ],
            };
        },
        methods: {
            add() {
                this.$router.push("/Home/add/express");
            },
        },
    };
</script>

<style scoped="scoped">
    .list {
        width: 100%;
        margin-top: 15px;
    }

    .list-item {
        width: 100%;
        height: 100px;
        background-color: #fff;
    }

    .logo {
        width: 160px;
        height: 60px;
        background-color: #0081ff;
    }

    .search {
        height: 70px;
        background-color: #fff;
        margin-bottom: 1px;
        padding: 0px 15px;
    }
</style>
